<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>对话框的函数版本</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="../button/button.css">
    <link rel="stylesheet" href="../mask.css">
    <link rel="stylesheet" href="./dialog.css">
</head>
<body>
<div class="page js_show">
    <div class="page__hd">
        <h1 class="page__title">Dialog</h1>
        <p class="page__desc">对话框</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="btn btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
        <a href="javascript:;" class="btn btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
        <a href="javascript:;" class="btn btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
        <a href="javascript:;" class="btn btn_default" id="showAndroidDialog2">Android Dialog样式二</a>
    </div>

</div>
<script src="../zepto.min.js"></script>
<script src="./dialog.js"></script>
<script>
    $(function(){
        var $iosDialog1 = $('#showIOSDialog1'),
            $iosDialog2 = $('#showIOSDialog2'),
            $androidDialog1 = $('#showAndroidDialog1'),
            $androidDialog2 = $('#showAndroidDialog2');
        $iosDialog1.click(function (e) {
            dialogIos_1("这个是弹窗","这个是弹窗内容",function () {
                alert("这个是主操作回调函数")
            },function () {
                alert("这个是辅助操作回调函数")
            },"这个是主操作","辅助操作")
        })
        $iosDialog2.click(function () {
            dialogIos_2("这个是弹窗内容",function () {
                alert("这个按钮回调函数");
            },"这个是按钮名字")
        })

        $androidDialog1.click(function (e) {
            dialogAnd_1("这个是弹窗","这个是弹窗内容",function () {
                alert("这个是主操作回调函数")
            },function () {
                alert("这个是辅助操作回调函数")
            },"这个是主操作","辅助操作")
        })
        $androidDialog2.click(function () {
            dialogAnd_2("这个是弹窗内容",function () {
                alert("这个是主操作回调函数")
            },function () {
                alert("这个是辅助操作回调函数")
            },"这个是主操作","辅助操作")
        })
    });


</script>
</body>
</html>